/* components/video-box/index.wxss */
@import '/assets/fonts/iconfont.wxss';

.videoBox {
    background: #242424;
    display: flex;
    flex-direction: column;

    .video {
        width: 100%;
        height: 400rpx;
    }

    .playerHeader {
        height: 80rpx;
    }

    .playerBody {
        flex-shrink: 0;
        flex-grow: 0;
        height: 400rpx;
        position: relative;

        .videoMask {
            width: 100%;
            height: 100%;
            background: rgba(196, 196, 196, 0);
            backdrop-filter: blur(6rpx);
            position: absolute;
            left: 0;
            top: 0;

            .playIcon {
                width: 156rpx;
                height: 140rpx;
                position: absolute;
                background: rgba(255, 255, 255, .6);
                border-radius: 12rpx;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;

                .iconfont {
                    color: #fff;
                    font-size: 36rpx;
                }
            }
        }
    }

    .playerFooter {
        height: 140rpx;
        flex-shrink: 0;
        position: relative;
        display: flex;
        flex-direction: column-reverse;

        .track {
            width: 100%;
            height: 10rpx;
            background: rgba(255, 255, 255, .1);
            position: absolute;
            left: 0;
            top: 0;
            display: flex;

            .progressBar {
                height: 100%;
                background: #058aff;
                transition: width 0.2s linear;
                border-radius: 5rpx;
            }
        }

        .wrap {
            display: flex;
            justify-content: space-between;

            .buttonV {
                width: 80rpx;
                height: 80rpx;
                color: #fff;
                text-align: center;
                line-height: 80rpx;

                .iconfont {
                    font-size: 36rpx;
                }
            }

            .left {
                padding: 0 10rpx;
                display: flex;
                gap: 14rpx;


                .quanlitySelector {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    position: relative;

                    .label {
                        font-size: 20rpx;
                        color: rgba(255, 255, 255, .85);
                        padding: 6rpx 12rpx;
                        border: rgba(255, 255, 255, .6) 2rpx solid;
                        border-radius: 8rpx;
                    }

                    .selector {
                        position: absolute;
                        color: #fff;
                        font-size: 28rpx;
                        width: 160rpx;
                        bottom: 14rpx;
                        left: -40rpx;
                        background: #242424;
                        transform: translateY(100%);

                        .item {
                            height: 62rpx;
                            line-height: 62rpx;
                            text-align: center;
                        }
                    }
                }
            }

            .right {
                padding: 0 10rpx;
                display: flex;
                gap: 14rpx;
            }
        }
    }

    &.fullScreen {
        .video {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 2;
        }
    }
}

.fullScreenCtrl {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;

    .icon {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .iconfont {
            font-size: calc(40vmin / 7.5);
        }
    }

    .header {
        height: calc(62vmin / 7.5);
        background: rgba(0, 0, 0, .4);
        color: #fff;
        display: flex;
        justify-content: space-between;
        font-size: calc(24vmin / 7.5);
        padding: 0 calc(62vmin / 7.5);
        pointer-events: all;
        position: relative;

        .left {
            display: flex;
            gap: calc(30vmin / 7.5);


            .caption {
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-size: calc(32vmin / 7.5);
            }
        }

        .right {
            display: flex;
            gap: calc(40vmin / 7.5);
            padding-right: calc(200vmin / 7.5);

            .wrap {
                display: flex;
                gap: calc(10vmin / 7.5);

                .iconfont {
                    line-height: 1em;
                }
            }
        }
    }

    .footer {
        height: calc(62vmin / 7.5);
        background: rgba(0, 0, 0, .4);
        color: #fff;
        display: flex;
        justify-content: space-between;
        font-size: calc(24vmin / 7.5);
        padding: 0 calc(62vmin / 7.5);
        pointer-events: all;
        position: relative;

        .left {
            display: flex;
            gap: calc(24vmin / 7.5);

            .buttonV {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: calc(62vmin / 7.5);
                width: calc(62vmin / 7.5);

                .iconfont {
                    font-size: calc(36vmin / 7.5);
                }
            }

            .quanlitySelector {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: calc(62vmin / 7.5);
                position: relative;

                .selector {
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: translateY(-100%) translateX(-30%);
                    width: calc(162vmin / 7.5);
                    background: rgba(0, 0, 0, .4);
                    text-align: center;

                    .item {
                        height: calc(62vmin / 7.5);
                        line-height: calc(62vmin / 7.5);
                    }
                }
            }
        }

        .right {
            display: flex;
            gap: calc(44vmin / 7.5);
        }

        .track {
            width: 100%;
            height: calc(6vmin / 7.5);
            background: rgba(255, 255, 255, .1);
            position: absolute;
            left: 0;
            top: 0;
            transform: translateY(-100%);
            display: flex;

            .progressBar {
                height: 100%;
                background: #058aff;
                transition: width 0.2s linear;
                border-radius: 5rpx;
            }
        }
    }

    .rightButtonList {
        position: absolute;
        right: calc(20vmin / 7.5);
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, .3);
        color: #fff;
        padding: calc(20vmin / 7.5);
        border-radius: calc(40vmin / 7.5);
        pointer-events: all;

        .icon {
            padding: calc(20vmin / 7.5) 0;
        }

        .iconfont {
            font-size: calc(48vmin / 7.5);
        }
    }

    .videoMask {
        width: 100%;
        height: 100%;
        background: rgba(196, 196, 196, 0);
        backdrop-filter: blur(calc(6vmin / 7.5));
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: all;

        .playIcon {
            width: calc(156vmin / 7.5);
            height: calc(140vmin / 7.5);
            position: absolute;
            background: rgba(255, 255, 255, .6);
            border-radius: calc(12vmin / 7.5);
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;

            .iconfont {
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
}